<template>
  <el-container>
    <el-header style="margin-bottom: 30px;">
      <h2>角色管理</h2>
    </el-header>
    <div style="margin-bottom: 30px;">
      <el-input v-model="search" placeholder="请输入角色名" style="width: 200px; margin-right: 10px;" />
      <el-button type="primary" @click="searchRole">搜索</el-button>
      <el-button style="position: absolute;right:10%"type="primary" @click="addRole">添加角色</el-button>
    </div>
    <el-table :data="role_list"  style="width: 100%">
      <el-table-column prop="id" label="序号"  />
      <el-table-column prop="name" label="角色"  />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="editRole(scope.row)">编辑</el-button>
          <el-button type="danger" @click="deleteRole(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
    v-model="flag"
    width="500"
  >
    <span style="font-size: 18px;">删除确认</span>
    <div style="margin-top: 20px;">信息删除后无法恢复，确定要删除吗？</div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="flag = false">取消</el-button>
        <el-button type="success" @click="submit">确定</el-button>
      </div>
    </template>
  </el-dialog>
    <!-- 修改表单 -->
    <!-- <el-dialog
      v-model="flag"
      title="编辑角色"
      width="500"
    >
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="Activity name">
        <el-input v-model="form.name" />
      </el-form-item>
    </el-form>
  
      <template #footer>
        <div>
          <el-button @click="flag = false">取消</el-button>
          <el-button type="primary" @click="putrole">确认</el-button>
        </div>
      </template>
    </el-dialog> -->
  
  <!-- 添加表单 -->
  
  </el-container>
  
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { ElMessage } from 'element-plus';
  import axios from 'axios';
  import http from "../../http";  
  import { useRoute, useRouter } from 'vue-router'
  const router = useRouter()
  const route = useRoute()
  const addRole = () => {
    router.push("/addrole")
  }
  // const postrole = () => {
  //   axios.post(`http://127.0.0.1:8000/app/role/`,forms.value)
  //   .then(res => {
  //     // console.log(res)
  //     flags.value = false;
  //     get_role_list()
  //   })
  // }

  let form = ref({
    name: ''
  })
  const editRole = (row) => {
    console.log(row)
    if (row.pid===null){
      alert("基础角色不允许修改");
      return;
    }else {
      router.push({path:"/updaterole",query:{id:row.id,pid:row.pid}})
    }
}
  const putrole = () => {
    // console.log(form.value)
    http.put(`/app/role/${form.value.id}/`, form.value,)
    .then(res=>{
      get_role_list()
      flag.value = false
    })
  }
  let flag = ref(false)
  let del=ref(0)
  const deleteRole=(info)=>{
    flag.value = true
    del.value = info.id
    console.log(del.value)
  }
  const submit = () => {
      http.delete(`/app/role/${del.value}/delete_role/`)
      .then(res=>{
        if (res.data.code==400){
          ElMessage.error("不能删除根角色")
          flag.value=false
        }
        if (res.data.code == 200){
          ElMessage.success("删除成功")
          flag.value=false
          get_role_list()
        }

      })
    }
  
  let search = ref('');
  const searchRole = () => {
    http.get(`/app/role/?name=${search.value}`)
    .then(res=>{
      role_list.value = res.data
    })
  }
  
  let role_list = ref([]);
  const get_role_list = () => {
    http.get(`/app/role/`)
    .then(res=>{
      role_list.value = res.data
    })
  }
  
  onMounted(()=>{
    get_role_list()
  })
  </script>